<script lang="ts" setup>
import axios from 'axios'
import {ElMessage} from 'element-plus'

axios.defaults.baseURL = 'http://localhost:8888'

function login() {
  axios.post('login', {username: 'admin', password: 'admin'}).then(res => {
    console.log(res.data)
    if (res.data.status === 0) {
      ElMessage.success('登录成功')
      localStorage.setItem('role_id', res.data.data._id)
    } else {
      ElMessage.error(res.data.msg)
    }
  }).catch(err => {
    console.log(err)
  })
}

function addUser() {
  let role_id = localStorage.getItem('role_id')
  if (role_id) {
    axios.post('manage/user/add', {username: 'wang3', password: '123456789', phone: '13014577033', email: 'webrx@126.com', role_id}).then(res => {
      console.log(res.data)
      if (res.data.status === 0) {
        ElMessage.success(`新增账号:wang3 成功`)
      } else {
        ElMessage.error(res.data.msg)
      }
    }).catch(err => {
      console.log(err)
      ElMessage.error('请检查网络')
    })
  } else {
    ElMessage.error('添加账号失败，请登录')
  }
}

function logout() {
  let role_id = localStorage.getItem('role_id')
  if (role_id) {
    localStorage.removeItem('role_id')
  }
  ElMessage.success(`退出登录`)
}
</script>

<template>
  <el-row>
    <el-button type="primary" @click="login">axios post login</el-button>

    <el-button type="success" @click="addUser">axios post user/add 新增账号</el-button>

    <el-button type="warning" @click="logout">安全退出</el-button>
  </el-row>
  <el-row>
    <div class="box">
      hello world npm install sass-loader sass --save-dev
    </div>
  </el-row>
</template>

<style lang="scss" scoped>
//进入项目目录下 npm install sass-loader sass --save-dev 安装开发依赖
//sass 声明变量
$cc: red;

//手动导入@import '@/assets/index.scss';

.box {
  color: $cc;
  margin: 10px;
  padding: 6px;
  cursor: pointer;

  &:hover {
    border-radius: 15px;
    //color: green;
    color: $p; //使用全局变量，用的vite.config.ts 配置css
    background-image: linear-gradient(rgba(255, 165, 0, 0.63), rgba(255, 165, 0, 0.16));
  }
}
</style>
